{% extends "nav.html" %}
{% block little %}存储{{ storage.ST_ip }}{% endblock %}
{% block content %}
    <!-- Main Content -->
    <div class="container-fluid">
        <div class="side-body">
            <div class="page-title">
                <span class="title">存储详细信息</span>
            </div>
            <div class="row">
                <div class="col-xs-12">
                    <div class="card">
                        <div class="card-header">
                            <div class="card-title">
                                <div class="title">存储详细清单</div>
                            </div>
                        </div>
                        <div class="card-body no-padding">
                            <div role="tabpanel">
                                <!-- Nav tabs -->
                                <ul class="nav nav-tabs" role="tablist">
                                    <li role="presentation" class="active"><a href="#tab1" aria-controls="home" role="tab" data-toggle="tab">存储基本信息</a></li>
                                    <li role="presentation"><a href="#tab2" aria-controls="tab" role="tab" data-toggle="tab" id="stroage_mess_yingshe">存储映射关系</a></li>
                                    <li role="presentation"><a href="#tab3" aria-controls="tab" role="tab" data-toggle="tab" id="stroage_mess_host">存储主机及主机组</a></li>
                                    <li role="presentation"><a href="#tab4" aria-controls="tab" role="tab" data-toggle="tab" id="stroage_mess_port">存储端口及端口组</a></li>
                                    <li role="presentation"><a href="#tab5" aria-controls="tab" role="tab" data-toggle="tab" id="stroage_mess_lun">存储lun及lun组</a></li>
                                    <li role="presentation"><a href="#tab6" aria-controls="tab" role="tab" data-toggle="tab" id="stroage_mess_disk">存储硬盘信息</a></li>
                                    <li role="presentation"><a href="#tab7" aria-controls="tab" role="tab" data-toggle="tab"  id="stroage_mess_raid">存储raid信息</a></li>
                                    <li role="presentation"><a href="#tab8" aria-controls="tab" role="tab" data-toggle="tab"  id="stroage_mess_falut">存储故障表</a></li>
                                    <li role="presentation"><a href="#tab9" aria-controls="tab" role="tab" data-toggle="tab" id="stroage_mess_work">存储实施情况</a></li>
                                </ul>
                                <!-- Tab panes -->
                                <div class="tab-content">
                                    <div role="tabpanel" class="tab-pane active" id="tab1">
                                        <table width="1000"  class="table  table-bordered">
                                            <tr>
                                                <td id="storage_id">{{ storage.id }}</td>
                                                <td>存储厂商：{{ storage.ST_prodname }}</td>
                                                <td>存储型号：{{ storage.ST_prodect }}</td>
                                                <td>存储SN:{{ storage.ST_sn }}</td>
                                                <td>存储IP：{{ storage.ST_ip }}</td>

                                            </tr>
                                            <tr>
                                                <td>存储微码：{{ storage.ST_firmware }}</td>
                                                <td>硬盘数量：</td>
                                                <td>裸容量：{{ storage.ST_totalrawcap }}T</td>
                                                <td>已用容量：{{ storage.ST_usecap }}GB</td>
                                                <td>可用容量:{{ storage.ST_availcap }}GB</td>
                                            </tr>
                                            <tr>
                                                <td>更新时间：{{ storage.ST_updatetime }}</td>
                                                <td>启用时间：{{ storage.ST_starttime }}</td>
                                                <td>关闭时间：{{ storage.ST_endtime }}</td>
                                                <td>硬盘数量：{{ disk | length }}</td>
                                                <td>&nbsp;</td>
                                            </tr>
                                            <tr>
                                                <td>&nbsp;</td>
                                                <td>&nbsp;</td>
                                                <td>&nbsp;</td>
                                                <td>&nbsp;</td>
                                                <td>&nbsp;</td>
                                            </tr>
                                        </table>
                                    </div>
                                    <div role="tabpanel" class="tab-pane" id="tab2">
                                        <table class="table  table-bordered">
                                            <thead>
                                            <tr>
                                                <th>ID</th>
                                                <th style="width: 20%">业务系统名称</th>
                                                <th style="width: 20%">端口组</th>
                                                <th style="width: 40%">主机组</th>
                                                <th style="width: 20%">LUN组</th>
                                                <th style="width: 20%">已用容量(GB)</th>
                                            </tr>
                                            </thead>
                                            <tbody id="storage_stmap_data">

                                            </tbody>
                                        </table>
                                    </div>
                                    <div role="tabpanel" class="tab-pane" id="tab3">
                                        <table class="table  table-bordered">
                                            <thead>
                                            <tr>
                                                <th>id</th>
                                                <th>主机</th>
                                                <th>所属主机组</th>
                                                <th>主机wwn</th>
                                                <th>连接光交</th>
                                                <th>发送流量</th>
                                                <th>接收流量</th>
                                                <th>对应主机</th>
                                                <th>对应主机业务</th>
                                            </tr>
                                            </thead>
                                            <tbody id="storage_host">
                                            </tbody>
                                        </table>
                                    </div>
                                    <div role="tabpanel" class="tab-pane" id="tab4">
                                        <table class="table  table-bordered">
                                            <thead>
                                            <tr>
                                                <th>id</th>
                                                <th>端口</th>
                                                <th>端口wwn</th>
                                                <th>所属端口组</th>
                                                <th>端口发送流量</th>
                                                <th>端口接收流量</th>
                                                <th>所接光交</th>
                                            </tr>
                                            </thead>
                                            <tbody id="storage_port">
                                            </tbody>
                                        </table>
                                    </div>
                                    <div role="tabpanel" class="tab-pane" id="tab5">
                                        <table class="table  table-bordered">
                                            <thead>
                                            <tr>
                                                <th>id</th>
                                                <th>LUN信息</th>
                                                <th>LUN大小(GB)</th>
                                                <th>LUN所属组</th>
                                                <th>LUN-UUID</th>
                                            </tr>
                                            </thead>
                                            <tbody id="storage_lun">
                                            </tbody>
                                        </table>
                                    </div>
                                    <div role="tabpanel" class="tab-pane" id="tab6">
                                        <h4>硬盘数量：{{ disk | length }}</h4>
                                        <table class="table  table-bordered">
                                            <thead>
                                            <tr>
                                                <th>硬盘槽位</th>
                                                <th>硬盘可用状态</th>
                                                <th>硬盘类型</th>
                                                <th>硬盘状态</th>
                                                <th>硬盘大小</th>
                                                <th>数据类型</th>
                                            </tr>
                                            </thead>
                                            <tbody id="storage_disk">
                                            </tbody>
                                        </table>
                                    </div>
                                    <div role="tabpanel" class="tab-pane" id="tab7">
                                        <table class="table  table-bordered">
                                            <thead>
                                            <tr>
                                                <th>ID号码</th>
                                                <th>raid名称</th>
                                                <th>raid类型</th>
                                                <th>raid大小(GB)</th>
                                                <th>剩余类型(GB)</th>
                                            </tr>
                                            </thead>
                                            <tbody id="storage_raid">
                                            </tbody>
                                        </table>
                                    </div>
                                    <div role="tabpanel" class="tab-pane" id="tab8">
                                        <table class="table  table-bordered">
                                        </table>
                                    </div>
                                    <div role="tabpanel" class="tab-pane" id="tab9">
                                        <table class="table  table-bordered">
                                            <thead>
                                            <tr>
                                                <th>需求时间</th>
                                                <th>需求容量</th>
                                                <th>容量说明</th>
                                                <th>需求说明</th>
                                                <th>完成时间</th>
                                            </tr>
                                            </thead>
                                            <tbody id="storage_work">
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
{% block js %}
    <div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel " id="st_app_modfiy">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="gridSystemModalLabel">请输入需要修改的业务名称</h4>
                </div>
                <div class="modal-body">
                    <div class="row">

                        <div class="col-sm-12">
                            <p id="st_id"></p>
                            <input type="text" class="form-control" id="inputEmail3" placeholder="请输入业务名称">
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default st_close" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" id="st_save">保 存</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

    <script>
        $(".st_a_modfiy").click(function () {
            $('#st_app_modfiy').modal({backdrop: 'static', keyboard: false},'toggle')
            nid = $(this).attr("nid")
            {#            $("#inputEmail3").val($(".st_app_text").text())#}
        });
        $("#st_save").click(function () {
            text = $("#inputEmail3").val()
            $.ajax({
                url: "{% url "storage_app_modfiy" %}",
                type: 'POST',
                data:{"id":nid,"text":text},
                success: function(data){
                    var obj = JSON.parse(data);
                    if(obj.status){
                        location.reload();
                    }else{
                        alert("error")
                    };
                }
            });
        });


        $("#stroage_mess_yingshe").click(function () {
            var id = $("#storage_id").text()
            $("#storage_stmap_data").empty()
            $('#waitting').modal({backdrop: 'static', keyboard: false},'toggle')
            $.ajax({
                url: "{% url "storage_stmap_ajax" %}",
                type: 'POST',
                data:{"id":id},
                success: function(data){
                    var obj = JSON.parse(data);
                    if(obj.status){
                        $("#storage_stmap_data").append(obj.data)
                        $('#waitting').modal('hide')
                    }else{
                        alert("error")
                        $('#waitting').modal('hide')
                    };
                }
            });
        });
        $("#stroage_mess_host").click(function () {
            var id = $("#storage_id").text()
            $("#storage_host").empty()
            $('#waitting').modal({backdrop: 'static', keyboard: false},'toggle')
            $.ajax({
                url: "{% url "stroage_mess_host_ajax" %}",
                type: 'POST',
                data:{"id":id},
                success: function(data){
                    var obj = JSON.parse(data);
                    if(obj.status){
                        $("#storage_host").append(obj.data)
                        $('#waitting').modal('hide')
                        console.log(obj.data)
                    }else{
                        alert("error")
                        $('#waitting').modal('hide')
                    };
                }
            });
        });
        $("#stroage_mess_port").click(function () {
            var id = $("#storage_id").text()
            $("#storage_port").empty()
            $('#waitting').modal({backdrop: 'static', keyboard: false},'toggle')
            $.ajax({
                url: "{% url "storage_port_ajax" %}",
                type: 'POST',
                data:{"id":id},
                success: function(data){
                    var obj = JSON.parse(data);
                    if(obj.status){
                        $("#storage_port").append(obj.data)
                        $('#waitting').modal('hide')
                        console.log(obj.data)
                    }else{
                        alert("error")
                        $('#waitting').modal('hide')
                    };
                }
            });
        });
        $("#stroage_mess_lun").click(function () {
            var id = $("#storage_id").text()
            $('#waitting').modal({backdrop: 'static', keyboard: false},'toggle')
            $("#storage_lun").empty()
            $.ajax({
                url: "{% url "storage_lun_ajax" %}",
                type: 'POST',
                data:{"id":id},
                success: function(data){
                    var obj = JSON.parse(data);
                    if(obj.status){
                        $("#storage_lun").append(obj.data)
                        console.log(obj.data)
                        $('#waitting').modal('hide')
                    }else{
                        alert("error")
                        $('#waitting').modal('hide')
                    };
                }
            });
        });
        $("#stroage_mess_disk").click(function () {
            var id = $("#storage_id").text()
            $("#storage_disk").empty()
            $('#waitting').modal({backdrop: 'static', keyboard: false},'toggle')
            $.ajax({
                url: "{% url "storage_disk_ajax" %}",
                type: 'POST',
                data:{"id":id},
                success: function(data){
                    var obj = JSON.parse(data);
                    if(obj.status){
                        $("#storage_disk").append(obj.data)
                        $('#waitting').modal('hide')
                        console.log(obj.data)

                    }else{
                        alert("error")
                        $('#waitting').modal('hide')
                    };
                }
            });
        });
        $("#stroage_mess_raid").click(function () {
            var id = $("#storage_id").text()
            $("#storage_raid").empty()
            $('#waitting').modal({backdrop: 'static', keyboard: false},'toggle')
            $.ajax({
                url: "{% url "storage_raid_ajax" %}",
                type: 'POST',
                data:{"id":id},
                success: function(data){
                    var obj = JSON.parse(data);
                    if(obj.status){
                        $("#storage_raid").append(obj.data)
                        console.log(obj.data)
                        $('#waitting').modal('hide')
                    }else{
                        alert("error")
                        $('#waitting').modal('hide')
                    };
                }
            });
        });
        $("#stroage_mess_work").click(function () {
            var id = $("#storage_id").text()
            $("#storage_work").empty()
            $('#waitting').modal({backdrop: 'static', keyboard: false},'toggle')
            $.ajax({
                url: "{% url "storage_work_ajax" %}",
                type: 'POST',
                data:{"id":id},
                success: function(data){
                    var obj = JSON.parse(data);
                    if(obj.status){
                        $("#storage_work").append(obj.data)
                        console.log(obj.data)
                        $('#waitting').modal('hide')
                    }else{
                        alert("error")
                        $('#waitting').modal('hide')
                    };
                }
            });
        });
    </script>
{% endblock %}